<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>购物系统-首页</title>
    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/common/ms-common.css}" rel="stylesheet">
</head>
<body>

<nav th:replace="common/topbar::flag(topbar='home')"></nav>

<nav th:replace="common/ms-toast.html"></nav>
<nav th:replace="product/cart.html"></nav>

<!-- 确认购买 模态框 -->
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel">订单详情页面</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-question" viewBox="0 0 16 16">
                    <path d="M8.05 9.6c.336 0 .504-.24.554-.627.04-.534.198-.815.847-1.26.673-.475 1.049-1.09 1.049-1.986 0-1.325-.92-2.227-2.262-2.227-1.02 0-1.792.492-2.1 1.29A1.71 1.71 0 0 0 6 5.48c0 .393.203.64.545.64.272 0 .455-.147.564-.51.158-.592.525-.915 1.074-.915.61 0 1.03.446 1.03 1.084 0 .563-.208.885-.822 1.325-.619.433-.926.914-.926 1.64v.111c0 .428.208.745.585.745z"/>
                    <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"/>
                    <path d="M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0z"/>
                </svg>
                是否确认购买？
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button class="btn btn-success" data-bs-target="#modal-review" data-bs-toggle="modal" onclick="addOrder(this)">确认</button>
            </div>
        </div>
    </div>
</div>
<!-- 订单结算 模态框 -->
<div class="modal fade modal-static" id="modal-review" aria-hidden="true" aria-labelledby="model-review-label" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="model-review-label">商品订单结算页面</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <form id="modal-show-form" class="row g-3 row">
                        <div class="col-md-12">
                            <label for="show-id" class="form-label">订单ID</label>
                            <input readonly name="id" type="text"  class="form-control" id="show-id" placeholder="">
                        </div>
                        <div class="col-md-3">
                            <label for="show-product-id" class="form-label">商品ID</label>
                            <input readonly name="productId" type="text"  class="form-control" id="show-product-id" placeholder="">
                        </div>
                        <div class="col-md-9">
                            <label for="modal-order-product-name" class="form-label">商品名称</label>
                            <input readonly name="product-name" type="text"  class="form-control" id="modal-order-product-name" placeholder="">
                        </div>
                        <div class="col-md-6">
                            <label for="order-stock" class="form-label">购买数量</label>
                            <input id="order-stock" readonly name="number" type="text"  class="form-control" placeholder="">
                        </div>
                        <div class="col-md-6">
                            <label for="show-price" class="form-label">成交价格（元）</label>
                            <input readonly name="price" type="text"  class="form-control" id="show-price" placeholder="">
                        </div>
                        <div class="col-md-12">
                            <label for="show-price" class="form-label">交易时间</label>
                            <input readonly name="createTime" type="text"  class="form-control" id="modal-order-time" placeholder="">
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">待会再说</button>
                <button class="btn btn-primary" onclick="payOrder('#show-id')">结算</button>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row mb-3 mt-3">
        <div class="col-md-3">
            <img class="float-end" src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/logo.png" width="200px" height="100px">
        </div>
        <div class="col-md-7">
            <nav class="ms-nav-search">
                <input type="text">
                <button
                        class="btn btn-dark"
                        type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                    </svg>
                    搜索
                </button>

                <ul class="list-unstyled list-group list-group-horizontal">
                    <li class="list-group-item">推荐搜索: </li>
                    <li class="list-group-item">电脑 </li>
                    <li class="list-group-item">手机</li>
                </ul>
            </nav>
        </div>
        <div class="col-md-2 align-content-end">
            <button class="btn btn-outline-success" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart4" viewBox="0 0 16 16">
                    <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
                </svg>
                购物车
            </button>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="">
                    <img id="product-detail-product-img" alt="商品图片" class="detail-product shadow" src="https://uni1024.oss-cn-hangzhou.aliyuncs.com/mall-system/public/logo.png"></img>
                </div>
            </div>
            <div class="col-md-5 align-content-start">
                <!-- 一个商品的卡片 -->
                <div id="product-detail-render-entry" class="card">
                    <div class="card-body">
                        <h5 class="card-title display-6">大数据</h5>
                        <p class="card-text fs-6" >商品分类:</p>
                        <p class="card-text fs-6">商品价格:</p>
                        <p class="card-text fs-6">商品描述:</p>
                        <button id="detail-btn-reduce" class="btn btn-light">-</button>
                        <input value="1" alt="购买数量" id="detail-input-stock" name="stock" size="6" width="6px">
                        <button id="detail-btn-add" class="btn btn-light">+</button>
                        <a href="#" class="btn btn-light">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart-plus" viewBox="0 0 16 16">
                                <path d="M9 5.5a.5.5 0 0 0-1 0V7H6.5a.5.5 0 0 0 0 1H8v1.5a.5.5 0 0 0 1 0V8h1.5a.5.5 0 0 0 0-1H9V5.5z"/>
                                <path d="M.5 1a.5.5 0 0 0 0 1h1.11l.401 1.607 1.498 7.985A.5.5 0 0 0 4 12h1a2 2 0 1 0 0 4 2 2 0 0 0 0-4h7a2 2 0 1 0 0 4 2 2 0 0 0 0-4h1a.5.5 0 0 0 .491-.408l1.5-8A.5.5 0 0 0 14.5 3H2.89l-.405-1.621A.5.5 0 0 0 2 1H.5zm3.915 10L3.102 4h10.796l-1.313 7h-8.17zM6 14a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm7 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                            </svg>
                            加入购物车
                        </a>
                        <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-index" viewBox="0 0 16 16">
                                <path d="M6.75 1a.75.75 0 0 1 .75.75V8a.5.5 0 0 0 1 0V5.467l.086-.004c.317-.012.637-.008.816.027.134.027.294.096.448.182.077.042.15.147.15.314V8a.5.5 0 1 0 1 0V6.435a4.9 4.9 0 0 1 .106-.01c.316-.024.584-.01.708.04.118.046.3.207.486.43.081.096.15.19.2.259V8.5a.5.5 0 0 0 1 0v-1h.342a1 1 0 0 1 .995 1.1l-.271 2.715a2.5 2.5 0 0 1-.317.991l-1.395 2.442a.5.5 0 0 1-.434.252H6.035a.5.5 0 0 1-.416-.223l-1.433-2.15a1.5 1.5 0 0 1-.243-.666l-.345-3.105a.5.5 0 0 1 .399-.546L5 8.11V9a.5.5 0 0 0 1 0V1.75A.75.75 0 0 1 6.75 1zM8.5 4.466V1.75a1.75 1.75 0 1 0-3.5 0v5.34l-1.2.24a1.5 1.5 0 0 0-1.196 1.636l.345 3.106a2.5 2.5 0 0 0 .405 1.11l1.433 2.15A1.5 1.5 0 0 0 6.035 16h6.385a1.5 1.5 0 0 0 1.302-.756l1.395-2.441a3.5 3.5 0 0 0 .444-1.389l.271-2.715a2 2 0 0 0-1.99-2.199h-.581a5.114 5.114 0 0 0-.195-.248c-.191-.229-.51-.568-.88-.716-.364-.146-.846-.132-1.158-.108l-.132.012a1.26 1.26 0 0 0-.56-.642 2.632 2.632 0 0 0-.738-.288c-.31-.062-.739-.058-1.05-.046l-.048.002zm2.094 2.025z"/>
                            </svg>
                            立即购买
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div id="product-detail-provider-entry" class="card">
                    <!-- 一个供应商卡片 -->
                    <div class="card-body">
                        <h5 class="card-title fs-6">店铺信息:</h5>
                        <p class="card-text fs-6" >商品分类:</p>
                        <p class="card-text fs-6" >发货地:</p>
                        <a href="#" class="btn btn-light">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-dots" viewBox="0 0 16 16">
                                <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
                                <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/>
                            </svg>
                            联系卖家
                        </a>
                    </div>
                </div>
                <!-- 店铺的其他商品 开始-->
                <div  class="card mt-3">
                    <div class="card-body">
                        <h5 class="card-title fs-6">店铺的其他商品</h5>
                        <div id="product-carousel" class="carousel slide" data-bs-ride="carousel">
                            <div id="product-detail-same-entry" class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="..." class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="..." class="d-block w-100" alt="...">
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button" data-bs-target="#product-carousel" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">上一个推荐</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#product-carousel" data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">下一个推荐</span>
                            </button>
                        </div>
                    </div>
                </div>
                <!-- 店铺的其他商品 结束-->
            </div>
        </div>
    </div>
</div>
<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-ajax.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-param.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-common.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-topbar.js}" type="text/javascript"></script>
<script th:src="@{/js/product/ms-detail.js}" type="text/javascript"></script>

</body>
</html>